<template>
	<a-modal :title="title" :width="1200" @cancel="handleCancel" :bodyStyle="bodyStyle" :visible="visible" :destroyOnClose="true" :maskClosable="false" :footer="null">
		<a-spin :spinning="confirmLoading">
			<s-table bordered :columns="columns" :data="loadListData" rowKey="cate" ref="table" :scroll="{ x: 1050 }" size="small" :isFirstLoad="false">
				<div slot="warnNotices"  slot-scope="text, record">
					<div class="flex flex-pack-justify flex-align-center">
					<div><i v-if="record.warnType == 'OFFLINE'" class="iconfont icon-a-zujian411"></i>
					<i v-if="record.warnType == 'TEMPERATURE'" class="iconfont icon-a-zujian391"></i>
					<i v-if="record.warnType == 'POWER'" class="iconfont icon-a-zujian421"></i>
					<i v-if="record.warnType == 'DISMANTLE'" class="iconfont icon-a-zujian401"></i>
					{{ record.warnNotices }}</div>
					<span v-if="record.warnType == 'TEMPERATURE'">{{record.temperature}}℃</span>
					<span v-if="record.warnType == 'POWER'">{{record.electricQuantity}}%</span>
					</div>
				</div>
				<span slot="warnLevel" class="tag" :style="{ background: filterWarnLevel(text) }"  slot-scope="text, record">{{ text }}</span>
			</s-table>
		</a-spin>
	</a-modal>
</template>

<script>
import { ModalMixins, rowSelection } from '@/mixins';
import { clearDeep } from '@/utils/base';
import { modManageapi } from '@/api';
import QS from 'qs';
const columns = [
	{
		title: '耳标ID',
		dataIndex: 'assetCode',
		key: 'assetCode',
		/* scopedSlots: {
			customRender: 'assetCode'
		} */
	},
	{
		title: '所属农场',
		dataIndex: 'farmName',
		key: 'farmName',
		ellipsis: true
	},
	{
		title: '告警信息',
		dataIndex: 'warnNotices',
		key: 'warnNotices',
		/* width: 500, */
		scopedSlots: { customRender: 'warnNotices' }
	},
	{
		title: '告警等级',
		dataIndex: 'warnLevel',
		key: 'warnLevel',
		align: 'center',
		scopedSlots: { customRender: 'warnLevel' },
		
	},
	{
		title: '告警时间',
		dataIndex: 'warnTime',
		key: 'warnTime'
	},
];
export default {
	name: 'alarmListModal',
	mixins: [ModalMixins, rowSelection],
	data() {
		return {
			columns: columns,
			selectedRowKeys: [],
			record: null,
			superQueryFieldList: [],
			extendParam: {},
			filters: ''
		};
	},
	created() {},
	methods: {
		show(record,warnType,filter){
			this.filters=filter;
			this.record=record;
			this.record.warnType=warnType;
			this.title =record.assetCode?((record.deviceType == '信息机'?record.deviceType:"耳标")+"("+ record.assetCode +")"):record.warnName+"详情";
			this.columns[0].title=record.deviceType?record.deviceType+"ID":"设备ID";
			this.confirmLoading = false;
			this.visible = true;
			this.$nextTick(() => {
				this.$refs.table.refresh();
			});
		},
		filterWarnLevel(value) {
			switch (value) {
				case '重大告警':
					return '#e33e00';
					break;
				case '较大告警':
					return '#A875F5';
					break;
				case '一般告警':
					return '#FFA200';
					break;
			}
		},
		loadListData(parameter) {
			return this.$postAction(
				modManageapi.warnUrl.getWarnByCode +
					'?' +
					QS.stringify(Object.assign({startDate:this.filters.startDate,
					endDate:this.filters.endDate,assetCode:this.record.assetCode}, {pageNum: parameter.pageNum, pageSize: parameter.pageSize }, this.farmId ? { farmId: this.farmId } : {},this.record.warnType?{warnType:this.record.warnType}:{}))
			).then(res => {
				console.log('res', res);
				this.list = res.page;
				return res.page;
			});
		},
		filterInshedStatus: function(value) {
			switch (value) {
				case '存栏':
					return '#0A8783';
					break;
				case '死淘':
					return '#FB5111';
					break;
				case '出栏':
					return '#F8BF3B';
					break;
			}
		}
	}
};
</script>
<style scoped="scoped" lang="less">
/* .tag {
	padding: 5px 10px;
	background: #fff;
	font-size: 12px;
	text-align: center;
	border-radius: 4px;
	margin: 0 auto;
	border: 1px solid;
} */
.iconfont {
	color: @primary-color;
	font-size: 20px;
}
.tag {
	width: 68px;
	height: 28px;
	/* background: #e33e00; */
	font-size: 12px;
	text-align: center;
	line-height: 28px;
	color: #fff;
	border-radius: 4px;
	display: block;
	margin: 0 auto;
}
</style>
